見出しに画像を自動追加する
今回は、見出しの先頭に画像を自動追加する方法を紹介します。見出しの文字は、H1やH2などのタグで記述するのが普通ですが、このままでは単に文字サイズが変更されるだけです。ここでは、H1タグやH2タグのCSSを変更することにより、見出しの見た目をカスタマイズし、さらに画像を自動的に追加する方法を紹介します。 サンプルページ

→ H1タグに画像を追加する
 
まずは、見出し(H1タグ)の先頭に画像を表示するCSSを記述します。画像の表示は、背景画像を指定するプロパティ「background-image」で指定できます。後に続くカッコ内には、表示する画像のファイル名を記述してください。続いて、「background-repeat:no-repeat;」で画像の繰り返しを“無し”に指定し、「background-position:left top;」で画像がH1タグの左上に表示されるように指定します。これで全てのH1タグの先頭に同じ画像を表示できます。
<STYLE type="text/css">
H1{
background-image:url(midashi1.gif);
background-repeat:no-repeat;
background-position:left top;
}
</STYLE>


→ H1タグの文字を調整する
 
H1タグに背景画像を表示すると、見出しの文字が背景画像と重なってしまいます。これを回避するには「padding-left」のプロパティを追加し、左側に適当な余白を設けてあげます。さらに、「font-size」で文字サイズ、「color」で文字色を調整すると、見た目のよい見出し(H1タグ)が完成します。なお、今回の例では「border-bottom」も追加し、H1タグの下に赤線も描画してみました。
H1{
background-image:url(midashi1.gif);
background-repeat:no-repeat;
background-position:left top;
padding-left:35px;
font-size:24pt;
color:#FF0000;
border-bottom:solid 2px #FF0000;
}
</STYLE>

<H1>画像つきの見出し</H1>
上の見出し(H1タグ)は、先頭に画像が自動追加されます。<BR>
この仕組みを利用すると、簡単なHTMLで見た目に美しいホームページを作成できます。
<BR>
サンプルページ


→ 階層的な画像付き見出しを作成する
 
同様の処理をH2タグにも指定すると、階層的な見出しに画像を追加することも可能となります。表示する画像ファイル、文字サイズ、文字色などを調整して自由にデザインしてみると面白いでしょう。あとは、普通にH1タグやH2タグを記述していくだけで、見た目の書式が統一された見出しを作成できます。
<STYLE type="text/css">
H1{
background-image:url(midashi1.gif);
background-repeat:no-repeat;
background-position:left top;
padding-left:35px;
font-size:24pt;
color:#FF0000;
border-bottom:solid 2px #FF0000;
}
H2{
background-image:url(midashi2.gif);
background-repeat:no-repeat;
background-position:left top;
padding-left:26px;
font-size:18pt;
color:#FF9966;
}
</STYLE>

<H1>画像つきの見出し</H1>
上の見出し(H1タグ)は、先頭に画像が自動追加されます。<BR>
この仕組みを利用すると、簡単なHTMLで見た目に美しいホームページを作成できます。
<BR>
<H2>レベル2の見出し</H2>
H2タグにもスタイルシートを指定することにより、<BR>
このように階層的な画像付き見出しを作成することも可能です。<BR>
サンプルページ


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI